<template>
	<view class="myHome">
		<view class="avator-box">
			<view class="title">我的</view>
			<view class="avator-wrap">
				<image class="img-avator" src="../../static/img/avator.svg" mode=""></image>
				<view class="info">
					<text class="phone-text">18700000000</text>
				</view>
			</view>
		</view>

		<view class="tag-box">
			<view class="tag-list">
				<view class="tag-item">
					<uni-badge class="uni-badge-left-margin" :text="2" absolute="rightTop" size="small">
						<image class="tag-icon" src="/static/img/wait_pay.svg" mode="">
						</image>
					</uni-badge>
					<view class="tag-text">
						<text>待付款</text>
					</view>
				</view>
				<view class="tag-item">
					<uni-badge class="uni-badge-left-margin" :text="8" absolute="rightTop" size="small">
						<image class="tag-icon" src="/static/img/wait_pay.svg" mode=""></image>
					</uni-badge>
					<view class="tag-text">
						<text>待服务</text>
					</view>
				</view>
				<view class="tag-item">
					<uni-badge class="uni-badge-left-margin" :text="100" absolute="rightTop" size="small">
						<image class="tag-icon" src="/static/img/wait_pay.svg" mode=""></image>
					</uni-badge>
					<view class="tag-text">
						<text>已完成</text>
					</view>
				</view>
				<view class="tag-item">
					<image class="tag-icon" src="/static/img/order.svg" mode=""></image>
					<view class="tag-text tag-text-order">
						<text>我的订单</text>
					</view>
				</view>
			</view>
		</view>

		<view class="click-list">
			<uni-list>
				<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon_3" title="我的钱包" />
				<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon_2" title="我的爱车" />
				<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon" title="设置" />
			</uni-list>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const extraIcon = ref({
		color: '#4cd964',
		size: '22',
		type: 'gear-filled'
	})
	const extraIcon_2 = ref({
		color: '#4cd964',
		size: '22',
		type: 'heart-filled'
	})
	const extraIcon_3 = ref({
		color: '#4cd964',
		size: '22',
		type: 'wallet-filled'
	})
</script>


<style lang="scss" scoped>
	.myHome {
		.avator-box {
			width: 100%;
			height: 340rpx;
			background: linear-gradient(230deg, #7bf18f, #23C62B);

			.title {
				text-align: center;
				font-size: 36rpx;
				padding: 44rpx 0;
			}

			.avator-wrap {
				display: flex;
				margin: 0 60rpx;
				;

				.img-avator {
					width: 100rpx;
					height: 100rpx;
				}

				.info {
					padding: 14rpx 0 0 10rpx;
					color: $uni-text-color;
				}
			}
		}

		.tag-box {
			width: 690rpx;
			height: 140rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(59, 59, 60, 0.4);
			border-radius: 4rpx;
			margin: -50rpx auto;

			.tag-list {
				display: flex;

				.tag-item {
					flex: 1;
					height: 140rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					text-align: center;

					.tag-icon {
						width: 42rpx;
						height: 42rpx;
					}

					.tag-text {
						color: #999;
						font-size: 26rpx;
						margin-top: 6rpx;

						&.tag-text-order {
							color: $uni-text-color;
						}
					}
				}
			}
		}

		.click-list {
			margin-top: 60rpx;
		}
	}
</style>